<template>
    <div class="container" id="mychart">

    </div>
</template> 
<script>
module.exports = {
    name: 'container',
    data() {
        return {}
    },
    mounted() {
        this.draw()
    },
    methods: {
        draw() {
            let myChart = echarts.init(document.getElementById("mychart"))
            var option;
            option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            
                        ]
                    }
                ]
            }
            myChart.setOption(option)
        }
    }
}
</script>
<style scoped>
.container {
    border: 1px solid aqua;
    width: 400px;
    height: 200px;
    position: absolute;
    left: 76%;
    top: 72%;
}

</style>